<template>
  <h1>父组件</h1>
  <button @click="attributes.name += '~'">名字改变</button>
  <button @click="attributes.age += 1">年龄改变</button>
  <button @click="attributes.job.type += '*'">类型改变</button>
  <button @click="attributes.job.salary += '!'">薪资改变</button>

  <hr />
  <Demo v-on="methods" v-bind="attributes"></Demo>
</template>

<script>
import { reactive } from 'vue'
import Demo from './components/Demo.vue'
export default {
  name: 'App',
  components: { Demo },
  setup() {
    const attributes = reactive({
      name: '洪奇奇',
      age: 18,
      job: {
        type: 'IT',
        salary: '18K',
      },
    })
    function click() {
      console.log('触发了click')
    }
    function mousedown(params) {
      console.log('触发了mousedown', params)
    }
    function mouseup() {
      console.log('触发了mouseup')
    }
    function some() {
      console.log('触发了some')
    }
    return {
      attributes,
      methods: {
        click,
        mousedown,
        mouseup,
        some,
      },
    }
  },
}
</script>
